<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title><?php echo $user_name?>的位置</title>
    <link rel="stylesheet" href="<?php echo base_url('static/wx/css/mui.min.css');?>">
    <link rel="stylesheet" href="<?php echo base_url('static/wx/css/style.css');?>">
    <script src="<?php echo base_url('static/wx/js/mui.min.js');?>"></script>
    <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
</head>
<style>
    body,
    .mui-content {
        background: #fff;
    }
    .title2 h2 {
        border: 0;
    }
    .title2 em {
        display: inline-block;
        *zoom: 1;
        *display: inline;
        border: 1px solid #ec661a;
        padding: 1.5px 5px;
        border-radius: 3px;
        margin-right: 15px;
    }
    .title2 span {
        font-size: 12px;
        color: #999999;
    }
    .logo img {
        width: 50%;
        margin: 0 auto;
        display: block;
        max-width: 100%;
    }
    #container {
        min-width: 375px;
        min-height: 667px;
    }
    .anniu {
        position: fixed;
        left: 0;
        width: 94%;
        background: #fff;
        z-index: 99;
        padding: 1em 3%;
        bottom: 0;
    }
    .leftcont {
        margin-right: 4em;
    }
    .leftcont h2 {
        font-size: 18px;
        font-weight: 400;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .leftcont p {
        margin: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .btn {
        width: 3em;
        float: right;
        position: absolute;
        right: 3%;
        top: 1em;
    }
    .btn img {
        width: 100%;
    }
    #mol-dialog {
        background: #f5f5f5;
        position: fixed;
        bottom: -100%;
        left: 0;
        width: 100%;
        z-index: 999;
    }
    #mol-dialog .box {
        background: #fff;
        margin-top: 10px;
    }
    #mol-dialog .box a {
        height: 3em;
        line-height: 3em;
        display: block;
        text-align: center;
    }
</style>
<body>
<div class="mui-content">
    <div id="container"></div>
    <div class="anniu">
        <div class="leftcont">
            <h2><?php echo $detAddress;?></h2>
            <p><?php echo $address;?></p>
        </div>
        <a class="btn" href="javascript:hhh();"><img src="<?php echo base_url('static/wx/img/png/daohang.png');?>" alt=""></a>
<!--        <a class="btn" href="iosamap://navi?sourceApplication=appname&amp;poiname=fangheng&amp;lat=36.547901&amp;lon=104.258354&amp;dev=1&amp;style=2"><img src="--><?php //echo base_url('static/wap/img/png/daohang.png');?><!--" alt=""></a>-->
    </div>

    <div class="right"></div>
</div>
<div id="mol-dialog">
    <div class="box"><a style="color:#FF2B10;" href="tel:<?php echo $mobile;?>">联系<?php echo $user_name;?></a></div>
<!--    <div class="box"><a href="--><?php //echo getUrl('app/common/gaode');?><!--">高德地图</a></div>-->
<!--    <div id="gaode" class="box" onclick="is_weixin()" style="display: none;"><a  href="iosamap://navi?sourceApplication=appname&amp;poiname=fangheng&amp;lat=--><?php //echo $lat?><!--&amp;lon=--><?php //echo $lng?><!--&amp;dev=1&amp;style=2">高德地图</a></div>-->
<!--    <div id="gaode2" class="box" onclick="is_weixin()" style="display: none;"><a  href="androidamap://navi?sourceApplication=appname&amp;poiname=fangheng&amp;lat=--><?php //echo $lat?><!--&amp;lon=--><?php //echo $lng?><!--&amp;dev=1&amp;style=2">高德地图</a></div>-->
    <div id="gaode2" class="box" ><a href="http://uri.amap.com/navigation?from=&to=<?php echo $lng?>,<?php echo $lat?>,<?php echo $detAddress;?>&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=0">高德地图</a></div>
<!--    <div class="box"><a href="baidumap://map/direction?mode=driving&origin=106.598222,29.598496&destination=104.258354,36.547901®ion=城市代码">百度地图</a></div>-->
<!--    <div class="box"><a href="baidumap://map/marker?location=--><?php //echo $lat?><!--,--><?php //echo $lng?><!--&title=我的位置&content=我的位置&src=yourCompanyName|yourAppName">百度地图</a></div>-->
    <div class="box"><a href="javascript:close();">取消</a></div>
</div>
<div id="zezao" style="position:fixed;left:0;top:0;width:100%;height:100%;display:none; z-index:999; background:url('<?php echo base_url('static/wap/img/png/bgys.png');?>') center;background-size: 100%;"></div>
</body>
<script>

    window.onload = function(){

//直接加载地图
        //初始化地图函数  自定义函数名init
        var init = function() {
            var center = new qq.maps.LatLng(<?php echo $lat;?>,<?php echo $lng;?>);
            var map = new qq.maps.Map(document.getElementById('container'),{
                center: center,
                zoomControl: false,       //缩放控件的初始启用/停用状态。
                zoom: 13

        });

            var anchor = new qq.maps.Point(6, 6),
                    size = new qq.maps.Size(16, 34),
                    origin = new qq.maps.Point(0, 0),
                    icon = new qq.maps.MarkerImage("<?php echo base_url('static/wx/img/png/mark.png');?>", size, origin, anchor);
            var marker = new qq.maps.Marker({
                icon: icon,
                map: map,
                showZoomControls:false,
                position:map.getCenter()});
        }
        //调用初始化函数地图
        init();

        var browser = {
            versions: function() {
                var u = navigator.userAgent,
                    app = navigator.appVersion;
                return {
                    trident: u.indexOf('Trident') > -1,
                    presto: u.indexOf('Presto') > -1,
                    webKit: u.indexOf('AppleWebKit') > -1,
                    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
                    mobile: !!u.match(/AppleWebKit.*Mobile.*/),
                    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), /*ios终端*/
                    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
                    iPhone: u.indexOf('iPhone') > -1, 
                    iPad: u.indexOf('iPad') > -1,
                    webApp: u.indexOf('Safari') == -1,
                    souyue: u.indexOf('souyue') > -1,
                    superapp: u.indexOf('superapp') > -1,
                    weixin:u.toLowerCase().indexOf('micromessenger') > -1,
                    Safari:u.indexOf('Safari') > -1

                };
            }(),
            language: (navigator.browserLanguage || navigator.language).toLowerCase()
        };
        if (browser.versions.ios) {
//           document.getElementById("gaode").style.display = "block";
        }else if (browser.versions.android){
//            document.getElementById("gaode2").style.display = "block";
        }else if(browser.versions.weixin){
//            document.getElementById("zezao").style.display = "block";
        };


    }
</script>
<script>
    function hhh() {
            var header = document.getElementById("mol-dialog");
            header.style.transition='height 500ms';
            header.style.bottom = 0;
//        setInterval(function(){
//            for(var i=0;i<10;i++){
//                setTimeout((function(pos){
//                    return function(){
//                        someAnimation(pos);
//                    }
//                })(i/10),i*100)
//            }
//        },1000);
    }
    function is_weixin(){
        var ua = navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i)=="micromessenger") {
            document.getElementById("zezao").style.display = "block";
        } else {
            return false;
        }
    }
    function close() {
        var header = document.getElementById("mol-dialog");
        header.style.transition='height 500ms';
        header.style.bottom = "-100%";
    }
</script>
</html>